<template>
	<el-container v-if="!dialog.save&&!dialog.detail">	
		<el-header>
			<div class="left-panel">
				<!-- <div class="module-filter">
					<label style="margin-right: 10px">{{$t('user.language')}}</label>
					<el-select v-model="params.language" :placeholder="$t('table_data.selectText')" clearable>
						<el-option
							v-for="item in langList"
							:key="item.value"
							:label="item.name"
							:value="item.value"
							>
						</el-option>
					</el-select>
				</div> -->
				<div class="module-filter">
					<label style="margin-right: 10px;width: 100px">{{ $t('artwork_data.classificationLabel') }}</label>
					<el-select v-model="params.category" :placeholder="$t('table_data.selectText')" clearable>
						<el-option v-for="item in classList" :key="item.value" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="module-filter">
					<label style="margin-right: 10px;width: 100px">{{ $t('order_data.paymentMethod') }}</label>
					<el-select v-model="params.paymentMethod" :placeholder="$t('table_data.selectText')" clearable>
						<el-option v-for="item in methodList" :key="item.value" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="module-filter">
					<label style="margin-right: 10px">{{$t('order_data.sellCinema')}}</label>
					<div class="el-select el-select--default">
						<el-input type="text" v-model="params.theatreName" :placeholder="$t('table_data.keyWordText')" clearable></el-input>
					</div>
				</div>
				<div class="module-filter">
					<label style="margin-right: 10px">{{$t('order_data.artworkName')}}</label>
					<div class="el-select el-select--default">
						<el-input type="text" v-model="params.searchKeywords" :placeholder="$t('table_data.keyWordText')" clearable></el-input>
					</div>
				</div>
				<!-- <div class="module-filter">
					<label style="margin-right: 10px">{{ $t('movie_data.startDate') }}</label>
					<el-date-picker v-model="params.startDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
						:placeholder="$t('formRule.selectPlaceholder')" :disabled-date="beforeOptions"></el-date-picker>
				</div>
				<div class="module-filter">
					<label style="margin-right: 10px">{{ $t('movie_data.endDate') }}</label>
					<el-date-picker v-model="params.endDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
						:placeholder="$t('formRule.selectPlaceholder')" :disabled-date="backOptions"></el-date-picker>
				</div> -->
				<div class="module-filter">
					<el-button type="primary" icon="el-icon-search" @click="upsearch">{{ $t('table_data.searchText') }}</el-button>
					<el-button @click="reset">{{ $t('table_data.resetText') }}</el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<!-- <div class="top-panel">
				<el-button type="primary" icon="el-icon-plus" @click="add">{{ $t('table_data.addText') }}</el-button>
			</div> -->
			<scTable ref="table" :apiObj="apiObj" row-key="id" stripe border :params="params" :hideSetting="true" @sortChange="sortChange" width="100%">
				<el-table-column :label="$t('order_data.artworkName')" width="auto">
					<template #default="scope">
						<span v-if="scope.row.artworkName">{{ scope.row.artworkName[$i18n.locale] }}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column :label="$t('order_data.paymentTime')" prop="paymentDatetime" width="200"></el-table-column> -->
				<el-table-column :label="$t('order_data.type')" prop="category" width="auto">
					<template #default="scope">
						<el-tag v-if="scope.row.category == 11" type="info">{{ $t('artwork_data.classification.class1') }}</el-tag>
						<el-tag v-else-if="scope.row.category == 12" type="success">{{ $t('artwork_data.classification.class2') }}</el-tag>
						<el-tag v-else-if="scope.row.category == 13" type="warning">{{ $t('artwork_data.classification.class3') }}</el-tag>
						<el-tag v-else-if="scope.row.category == 14" type="info">{{ $t('artwork_data.classification.class4') }}</el-tag>
						<el-tag v-else-if="scope.row.category == 15" type="info">{{ $t('artwork_data.classification.class7') }}</el-tag>
						<el-tag v-else-if="scope.row.category == 21" type="success">{{ $t('artwork_data.classification.class5') }}</el-tag>
						<el-tag v-else type="warning">{{ $t('artwork_data.classification.class6') }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column :label="$t('order_data.creatorName')" prop="creatorName" width="auto">
					<template #default="scope">
						<div>
							{{ 	
								setName(scope.row.creatorName)
							}}
						</div>
					</template>
				</el-table-column>
				<el-table-column :label="$t('order_data.sellUserName')" prop="orderUserName" width="auto"></el-table-column>
				<el-table-column :label="$t('order_data.paymentMethod')" prop="paymentMethod" width="auto">
					<template #default="scope">
						<span v-if="scope.row.paymentMethod == 1">{{ $t('artwork_data.form.online') }}</span>
						<span v-else>{{ $t('artwork_data.form.outline') }}</span>
					</template>
				</el-table-column>
				<el-table-column :label="$t('order_data.sellCinema')" prop="theatreName" width="auto"></el-table-column>
				<el-table-column :label="$t('order_data.price')" prop="price" width="auto"></el-table-column>
				<el-table-column :label="$t('order_data.currency')" prop="currency" width="auto">
					<template #default="scope">
						<span>{{ scope.row.currency?scope.row.currency:$t('table_data.currency.jpy') }}</span>
					</template>
				</el-table-column>
				<el-table-column :label="$t('order_data.status')" prop="status" width="auto">
					<template #default="scope">
						<el-tag v-if="scope.row.status == 1" type="primary">{{ $t('order_data.statusType.status1') }}</el-tag>
						<el-tag v-else-if="scope.row.status == 2" type="success">{{ $t('order_data.statusType.status2') }}</el-tag>
						<el-tag v-else-if="scope.row.status == 3" type="danger">{{ $t('order_data.statusType.status3') }}</el-tag>
						<el-tag v-else-if="scope.row.status == 4" type="danger">{{ $t('order_data.statusType.status4') }}</el-tag>
						<el-tag v-else>{{ $t('order_data.statusType.status5') }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column :label="$t('table_data.createAt')" prop="createAt" width="auto" sortable></el-table-column>
				<el-table-column :label="$t('table_data.operate')" width="auto" align="center">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small" @click="table_detail(scope.row, scope.$index)">{{ $t('table_data.detail') }}</el-button>
							<!-- <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">{{ $t('table_data.edit') }}</el-button> -->
							<!-- <el-popconfirm :title="$t('table_data.del_text')" @confirm="table_del(scope.row, scope.$index)">
								<template #reference>
									<el-button text type="primary" size="small">{{ $t('table_data.del') }}</el-button>
								</template>
							</el-popconfirm> -->
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
		<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>

</template>

<script>
	import saveDialog from './client/save'

	export default {
		name: "client",
		components: {
			saveDialog
		},
		data(){
			return {
				date: '',
				langList: [
					{
						name: '简体中文',
						value: 'zh_CN',
					},
					{
						name: '繁體中文',
						value: 'zh_TW',
					},
					{
						name: 'English',
						value: 'en_US',
					},
					{
						name: '日本語',
						value: 'ja_JP',
					}
				],
				methodList: [
					{
						name: this.$t('artwork_data.form.outline'),
						value: 0
					},
					{
						name: this.$t('artwork_data.form.online'),
						value: 1
					}
				],
				classList: [
					{
						name: this.$t('artwork_data.classification.class1'),
						value: 11,
					},
					{
						name: this.$t('artwork_data.classification.class2'),
						value: 12,
					},
					{
						name: this.$t('artwork_data.classification.class3'),
						value: 13,
					},
					{
						name: this.$t('artwork_data.classification.class4'),
						value: 14,
					},
					{
						name: this.$t('artwork_data.classification.class5'),
						value: 21,
					},
					{
						name: this.$t('artwork_data.classification.class7'),
						value: 15,
					},
					{
						name: this.$t('artwork_data.classification.class6'),
						value: 29,
					}
				],
				statusList: [
					{
						name: this.$t('user_data.status.type1'),
						value: 0,
					},
					{
						name: this.$t('user_data.status.type2'),
						value: 1,
					},
					{
						name: this.$t('user_data.status.type3'),
						value: 2,
					},
					{
						name: this.$t('user_data.status.type4'),
						value: 9,
					}
				],
				typeList: [
					{
						name: this.$t('user_data.userType.type1'),
						value: 1,
					},
					{
						name: this.$t('user_data.userType.type2'),
						value: 2,
					}
				],
				dialog: {
					save: false,
					detail: false
				},
				search: {
					keyword: ""
				},
				apiObj: {},
				selection: [],
				searchKey: null,
				params: {
					searchKeywords: null,
					theatreName: null,
					paymentMethod: null,
					category: null,
				}
			}
		},
		computed: {
			setName(){
				return (name)=>{
				  if(name)return name[this.$i18n.locale]
				}
			}
		},
    async created(){
			this.apiObj = this.$API.order.getTheatre;
    },
		methods: {
			reset(){
				this.params.searchKeywords = null;
				this.params.theatreName = null;
				this.params.paymentMethod = null;
				this.params.category = null;
				this.$refs.table.upData(this.params);
			},
			upsearch(){
				// let data = {}
				// Object.assign(data,this.params)
				// data.startDate = new Date(data.startDate).getTime();
				// data.endDate = new Date(data.endDate).getTime();
				this.$refs.table.upData(this.params);
			},
			//增加
			add(){
				this.$router.push({path:'/orderTable/client/save',query:{type:'add','id':'add'}})
				// this.dialog.save = true
				// this.$nextTick(() => {
				// 	this.$refs.saveDialog.open()
				// })
			},
			//编辑
			table_edit(row){
				this.$router.push({path:'/orderTable/client/save',query:{type:'add','id':row.orderId}})
				// this.dialog.save = true
				// this.$nextTick(() => {
				// 	this.$refs.saveDialog.open('edit').setData(row)
				// })
			},
			// 详情
			table_detail(row){
				this.$router.push({path:'/orderTable/client/save',query:{type:'detail','id':row.orderId}})
				// this.dialog.save = true
				// this.$nextTick(() => {
				// 	this.$refs.saveDialog.open('edit').setData(row)
				// })
			},
			//删除
			async table_del(row, index){
				var reqData = {id: row.id}
				var res = await this.$API.user.del.post(reqData);
				if(res.code == 200){
					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
					this.$refs.table.tableData.splice(index, 1);
					this.$message.success(this.$t('table_data.delsucc'))
				}else{
					this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
				}
			},
			//批量删除
			async batch_del(){
				this.$confirm(`${this.$t('table_data.deltips1')} ${this.selection.length} ${this.$t('table_data.deltips2')}`, this.$t('table_data.tips'), {
					type: 'warning'
				}).then(() => {
					const loading = this.$loading();
					this.selection.forEach(item => {
						this.$refs.table.tableData.forEach((itemI, indexI) => {
							if (item.id === itemI.id) {
								this.$refs.table.tableData.splice(indexI, 1)
							}
						})
					})
					loading.close();
					this.$message.success(this.$t('table_data.operasucc'))
				}).catch(() => {

				})
			},
			//表格选择后回调事件
			selectionChange(selection){
				this.selection = selection;
			},
			//本地更新数据
			handleSuccess(data, mode){
				if(mode=='add'){
					data.id = new Date().getTime()
					this.$refs.table.tableData.unshift(data)
				}else if(mode=='edit'){
					this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
						Object.assign(item, data)
					})
				}
			},
			beforeOptions(v){
				if(!this.params.endDate)return false
				return v.getTime() > new Date(this.params.endDate).getTime();//  - 86400000是否包括当天
			},
			backOptions(v){
				return v.getTime() < new Date(this.params.startDate).getTime();//  - 86400000是否包括当天
			},
		}
	}
</script>

<style scoped>
.module-filter {
	margin-right: 10px;
}
.el-header {
	--el-header-height: auto;
}
.left-panel {
	flex-wrap: wrap;
	line-height: 50px;
}
.top-panel {
	margin: 10px;
}
.scTable {
	height: calc(100% - 60px) !important;
}
.el-main.nopadding {
	margin: 0 10px;
}
.el-header {margin: 10px;border-radius: 4px;}
</style>
